<template>

  <div id="box">

    <el-row :gutter="40" style="padding-left:40px" class="panel-group">
      <el-col class="card-panel-col" :span="3">
        <p class="title">CPU使用率</p>
        <pie :percent="detail.cpuInfo" />
        <p class="title-two">{{ detail.cpuCount }}核心</p>
      </el-col>
      <el-col class="card-panel-col" :span="3">
        <p class="title">内存使用率</p>
        <pie :percent="detail.ramUsedPercent" />
        <p class="title-two">{{ detail.ramUse }}/{{ detail.ramTotal }}(MB)</p>
      </el-col>
      <el-col v-for="(v , index) in detail.disk" :key="index" class="card-panel-col" :span="3">
        <p class="title">{{ v.path }}</p>
        <pie :percent="parseInt(v.usedPercent)" />
        <p class="title-two">{{ parseInt(v.used/1024/1024/1024) }}/{{ parseInt(v.total/1024/1024/1024) }}(GB)</p>
      </el-col>
    </el-row>
    <div class="tables">
      <div class="tables-title">运行环境</div>
      <div class="tables-item">
        <span>语言</span>
        <span style="float:right">Golang</span>
      </div>
      <div class="tables-item">
        <span>Golang版本</span>
        <span style="float:right">{{ detail.GOVersion }}</span>
      </div>
      <div class="tables-item">
        <span>安装路径</span>
        <span style="float:right">{{ detail.GOROOT }}</span>
      </div>
    </div>
    <div class="tables">
      <div class="tables-title">服务器信息</div>
      <div class="tables-item">
        <span>系统版本</span>
        <span style="float:right">{{ detail.GOOS }}</span>
      </div>
      <div class="tables-item">
        <span>系统构架</span>
        <span style="float:right">{{ detail.GOARCH }}</span>
      </div>
    </div>
  </div>

</template>

<script>
import pie from './pre'
import { URL } from '@/utils/request'

export default {
  components: { pie },
  data() {
    return {
      list: [
        {
          title: '负载状态',
          titleBottm: '40G/100G',
          bit: 80
        },
        {
          title: '负载状态',
          bit: 80
        }, {
          title: '负载状态',
          bit: 80
        }, {
          title: '负载状态',
          bit: 80
        }
      ],
      detail: {},
      websock: ''
    }
  },
  created() {
    this.initWebSocket()
  },
  destroyed() {
    this.websock.close() // 离开路由之后断开websocket连接
  },
  methods: {
    // GetSystemInit() {
    //   SystemInit().then(response => {
    //     this.detail = response.data
    //     this.detail.cpuInfo = parseInt(this.detail.cpuInfo)
    //   })
    // },
    // 初始化weosocket
    initWebSocket() {
      const wsuri = 'ws://' + URL + '/admin/SystemInit'
      this.websock = new WebSocket(wsuri)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },
    // //连接建立之后执行send方法发送数据
    websocketonopen(e) {
      console.log('连接上')
      console.log(e)
      // let actions = {"token" : getToken()};
      // this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror() { // 连接建立失败重连
      this.initWebSocket()
    },
    websocketonmessage(e) {
      // 数据接收
      const redata = JSON.parse(e.data)
      this.detail = redata.data
      this.detail.cpuInfo = parseInt(this.detail.cpuInfo)
      // console.log(redata)
    },
    websocketsend(Data) { // 数据发送
      this.websock.send(Data)
    },
    websocketclose(e) { // 关闭
      console.log('断开连接', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.body{
  background: #e9eaee!important;
}
#box{
  padding: 10px;
  background: #e9eaee!important;
}
.panel-group{
  background: white;
  // padding-top: 20px;
  margin-left: 0!important;
  margin-right: 0!important;
  border-radius: 4px;
  box-shadow: 7px 7px 40px rgba(49, 43, 43, 0.05);
  // padding-bottom: 30px;
}
.card-panel-col{
  // background: white;
  margin-right: 30px;
  // padding-bottom: 30px;
}
.tables{
  margin-top: 10px;
  background: white;
  padding: 30px;
  color: 303133;
   border-radius: 4px;
  box-shadow: 7px 7px 40px rgba(49, 43, 43, 0.05);
}
.title{
  text-align: center;
}
.title-two{
  text-align: center;
  color: #999;
  margin-top: 0!important;
  font-size: 15px;
}
.tables-item{
  border-top: 1px solid #e6ebf5;
  padding: 10px;
  line-height: 40px;
}
.tables-title{
  font-size: 23px;
  margin-bottom: 10px;
}
</style>
